<template>

    <div>
        <div class="header-sum-card">
            <Row :gutter="10" class="mt10">
                <!--                左侧博客列表栏-->
                <Col class="mb10" :lg="18" :md="16" :sm="24" :xs="24">
                    <Card>
                        <div style="text-align: right">
                            <!--            最高栏的显示博客条数-->
                            <h2 slot="extra">Blog 共{{totals}}篇</h2>
                        </div>

                    </Card>
                    <Card>
                        <!--                    博客列表-->
                        <List item-layout="vertical">
                            <ListItem v-for="item in data" :key="item.id" router>
                                <router-link class="title-font-size" :to="{name:'SBlog',query:{id:item.id}}">
                                    {{item.title}}
                                </router-link>
                                <br/>
                                <router-link style="color: #0F0F0F;font-size: 16px"
                                             :to="{name:'SBlog',query:{id:item.id}}">{{ item.description}}
                                </router-link>

                                <template slot="action">
                                    <li>
                                        <Avatar :src="author.avatar"></Avatar>
                                        {{author.name}}
                                    </li>
                                    <li>
                                        <Icon type="md-eye"/>
                                        {{item.views}}
                                    </li>
                                    <li>
                                        <Icon type="ios-calendar"/>
                                        {{dateFilter(item.createTime)}}
                                    </li>
                                    <li style="text-align: right">
                                        <Tag color="cyan">{{item.type.name}}</Tag>
                                        <Tag color="green">{{item.tag.name}}</Tag>
                                    </li>
                                </template>

                                <template slot="extra">
                                    <router-link class="title-font-size" :to="{name:'SBlog',query:{id:item.id}}"><img
                                            :src="item.firstImageUrl"
                                            style="width: 100%;border-radius: 10px;">
                                    </router-link>
                                </template>
                            </ListItem>
                        </List>
                        <!--                        分页导航栏-->
                        <div style="text-align: center;margin-top: 10px;">

                            <Page v-show="this.totals===0?false:true" :total="totals" show-sizer @on-change="page"
                                  @on-page-size-change="changePageSize" :page-size-opts="[8,16,24]" :page-size="8"/>
                        </div>
                    </Card>
                </Col>
                <!--              右侧博客栏-->
                <Col class="mb10" :lg="6" :md="16" :sm="24" :xs="24">
                    <!--                    右侧简介栏-->
                    <Card class="bgimg">
                        <p slot="title">
                            <span style="font-size: 16px;font-weight: bolder">个人简介</span>
                        </p>
                        <p>
                            <img :src="author.avatar" alt=""
                                 style="margin-left:10%;height: 100px;width: 100px;border-radius: 50%"/>
                            <span style="margin-left: 10%;
                                         padding-top: -16px;
                                         font-size: 30px;
                                         font-family: 幼圆;
                                         font-weight: bolder;">{{author.name}}</span>
                        </p>
                        <p>{{author.introduction}}</p>
                        <div>


                            <Icon type="md-at" size="30" :title="author.Qq"/>
                            <Icon type="md-at" size="30"/>

                            <p style="float: right" @click="showNotice" slot="extra">
                                <Icon type="logo-octocat" size="25"/>
                                最新公告
                            </p>

                        </div>
                    </Card>
                    <!--                    分类右侧栏-->
                    <Card>
                        <!--                        标题栏左-->
                        <p slot="title">
                            <Icon type="ios-bulb"></Icon>
                            分类
                        </p>
                        <!--                        标题栏右-->
                        <router-link to="sType"  slot="extra" style="color: rgba(74,74,74,0.6)">
                            more
                            <Icon type="md-arrow-round-forward"/>
                        </router-link>
                        <ul>
                            <Tag size="large" v-for="item in typeList" color="cyan">
                                <router-link style="color: rgba(74,74,74,0.6)"
                                             :to="{name:'SType',query:{type:JSON.stringify(item)}}" target="_blank">{{
                                    item.name }}
                                </router-link>
                            </Tag>
                        </ul>
                    </Card>
                    <!--                    标签右侧栏-->
                    <Card>
                        <!--                        标题栏左-->
                        <p slot="title">
                            <Icon type="ios-pricetag"></Icon>
                            标签
                        </p>
                        <!--                        标题栏右-->
                        <router-link to="sTag"slot="extra" style="color: rgba(74,74,74,0.6)">
                            more
                            <Icon type="md-arrow-round-forward"/>
                        </router-link>
                        <ul>
                            <Tag size="large" v-for="item in tagList" color="blue">
                                <router-link style="color: rgba(74,74,74,0.6)"
                                             :to="{name:'STag',query:{tag:JSON.stringify(item)}}" target="_blank">{{
                                    item.name }}
                                </router-link>
                            </Tag>

                        </ul>
                    </Card>
                    <!--                    最新推荐-->
                    <Card>
                        <!--                        标题栏左-->
                        <p slot="title">
                            <Icon type="md-bookmark"/>
                            最新推荐
                        </p>
                        <ul style="text-align: center;font-size: 12px">
                            <li v-for="item in newsList" style="list-style: none">
                                <Card>
                                    <!--                                    <a :href="item.url" target="_blank" style="color: rgba(74,74,74,0.6)">{{ item.title-->
                                    <!--                                        }}</a>-->
                                    <router-link style="color: rgba(74,74,74,0.6)"
                                                 :to="{name:'SBlog',query:{id:item.id}}" target="_blank">{{
                                        item.title }}
                                    </router-link>
                                </Card>

                            </li>
                        </ul>
                    </Card>
                    <!--                    右侧友情链接-->
                    <Card>
                        <!--                        标题栏左-->
                        <p slot="title">
                            <Icon type="ios-link"></Icon>
                            友情链接
                        </p>

                        <ul style="text-align: center;font-size: 12px">
                            <li v-for="item in linkList" style="list-style: none">
                                <Card>
                                    <a :href="item.url" target="_blank" style="color: rgba(74,74,74,0.6)">{{ item.title
                                        }}</a>
                                </Card>

                            </li>
                        </ul>
                    </Card>
                </Col>
            </Row>
        </div>
        <template>
            <!--            返回顶部组件-->
            <BackTop>
                <div style="background-color:#76A09D;border-radius: 50%">
                    <Icon type="md-arrow-round-up"/>
                </div>
            </BackTop>
        </template>
    </div>

</template>
<script>
    export default {
        // 接收父组件的值
        props: ['searchVal'],
        data() {
            return {
                author: {},
                //博客总条数
                totals: 0,
                //博客列表数据源
                data: [],
                // // 右侧分类列表
                typeList: [],
                // // 右侧标签列表
                tagList: [],
                // //最新推荐列表
                newsList: [],
                // // 右侧友情链接列表
                linkList: [],
                noticeModel: false,
            }
        },
        created() {
            this.getBlogs()
            this.showRight()
            if (!window.sessionStorage.getItem("noticeModel")) {
                window.sessionStorage.setItem("noticeModel", "true");
                this.showNotice()
            }

        },


        //检测父组件传的值是否有变化触发
        watch: {
            searchVal: function (result) {
                if (result != undefined) {
                    this.data = result.data
                    this.totals = 0;
                    this.$Message.success(result.message)
                } else {
                    this.getBlogs()
                }
            }
        },
        methods: {
            async showNotice() {
                if (window.sessionStorage.getItem("noticeModel")) {
                    const {data: result} = await this.$http.get("getNotice")
                    if (result.code === 200) {
                        this.$Modal.success({
                            title: '最新公告',
                            content: result.data[0].content,
                        });
                    }else {
                        this.$Modal.success({
                            title: '最新公告',
                            content: '暂无公告!',
                        });
                    }
                }


            },
            //获取左侧信息
            async getBlogs() {
                const {data: result} = await this.$http.get("showBlogs/0/8")
                if (result.code === 200) {
                    this.data = result.data.content
                    this.totals = result.data.totalElements;
                    this.$Message.success(result.message)

                } else {
                    this.$Message.error(result.message)

                }
            },
            //分页方法
            async page(currentPage) {
                const {data: result} = await this.$http.get("showBlogs/" + (currentPage - 1) + "/8");
                if (result.code === 200) {
                    this.data = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //改变每页显示条数的方法
            async changePageSize(pageSize) {
                const {data: result} = await this.$http.get("showBlogs/0/" + pageSize);
                if (result.code === 200) {
                    this.data = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //获取右侧侧博客列表
            async showRight() {
                const {data: result} = await this.$http.get("showRight")
                if (result.code === 200) {
                    this.author = result.data.admin
                    this.typeList = result.data.types;
                    this.tagList = result.data.tags;
                    this.newsList = result.data.pusTop;
                    this.linkList = result.data.links;
                    // this.$Message.success(result.message)
                } else {
                    this.$Message.error(result.message)
                }
            },
            //格式化时间的方法
            dateFilter: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
                var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
                var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
                return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
            },

        },

    }
</script>
<style lang="less">
    .bgimg{
        background-image: url("../assets/350.8916ae4.jpg");
        background-size: 100%;
    }

    .mt20 {
        font-weight: bolder;
    }

    .mt10 {
        margin-top: 10px;
        /*设置最外层页面的外边距为0*/
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .tc {
        text-align: center
    }

    /*改变博客列表底部的author seecount等位置大小*/
    .ivu-list-vertical .ivu-list-item-action > li {
        padding: 0 5px !important;
    }

    /*设置card的内边距*/

    .header-sum-card {
        font-family: 幼圆;

        span.num {
            font-size: 30px;
        }

    }

    .title-font-size {
        font-size: 20px !important;
        font-weight: bolder !important;
        color: black;
    }

</style>
